<template>
  <div class="cityDetail">
    <van-overlay
      :show="show"
      :z-index=200
    />
    <van-loading v-if="show" color="#1989fa" size="50px"/>
    <span>当前城市:{{cityName}}</span>
    <van-index-bar :index-list="getAllCityName">
      <ul>
        <li v-for="item in getAllCity">
          <van-index-anchor :index="item.name">{{item.name}}</van-index-anchor>
          <ul>
            <li v-for="items in item.city">
              <van-cell
                :title="items.cityname"
                @click="Setcityid(items.cityid,items.cityname)"
              />
            </li>
          </ul>
        </li>
      </ul>
    </van-index-bar>
  </div>
</template>

<script>
  import {getStore, setStore} from '../../../src/config/mUtils'

  export default {
    name: "cityDetail",
    data() {
      return {
        cityName: getStore("cityname"),
        getAllCity: [],
        getAllCityName: [],
        show: true
      }
    },
    created() {
      this.initDate()
    },
    methods: {
      initDate() {
        this.show = true
        this.$axios.post('category/getAllCities', this.qs.stringify({
          "token": getStore("token")
        })).then((res) => {
          this.getAllCity = res.data.data
          this.getAllCity.forEach(item => {
            this.getAllCityName.push(item.name)
          })
          this.show = false
        });
      },
      Setcityid(id, name) {
        this.$dialog.confirm({
          title: `当前城市：${this.cityName}是否切换为${name}`
        }).then(() => {
          setStore("cityname", name)
          setStore("cityid", id)

          this.$toast.success('切换成功')
          this.$router.go(-1)

        }).catch(() => {
          this.$toast.fail('取消切换')
        });
      }
    }
  }
</script>

<style scoped>
  .noData {
    text-align: center;
    display: block;
    margin: 30px;
  }

  .van-loading, .van-loading__spinner {
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 201;
    width: 120px;
    height: 120px;
    margin-left: -50px;
    margin-top: -50px;
  }

  >>> .van-index-anchor {
    background-color: #f0f0f0;
  }

  /**/
</style>
